<template>
  <div>
    <el-menu
      :default-active="select"
      class="page-container"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item @click="phoneMenuShow = !phoneMenuShow" class="phoneShowOnly" index="menu">
        <i class="el-icon-menu"></i>
      </el-menu-item>
      <el-menu-item class="phoneNotShow" @click="index" index="index">首页</el-menu-item>
      <el-submenu
        class="phoneNotShow"
        v-for="(item,index) in tags"
        :key="index"
        :index="(index+1)+''"
      >
        <template slot="title">{{item.tagsName}}</template>
        <el-menu-item
          v-for="(item2,index2) in item.typeSends"
          :key="index2"
          @click="type(item2.typeId)"
          :index="'type-'+item2.typeId"
        >{{item2.typeName}}</el-menu-item>
      </el-submenu>
      <el-submenu class="phoneNotShow" :style="{float:'right'}" v-if="user.islogin" index="user">
        <template slot="title">{{user.name}}</template>
        <el-menu-item @click="usercenter" index="user-center">个人中心</el-menu-item>
        <el-menu-item @click="useredit" index="user-edit">修改资料</el-menu-item>
      </el-submenu>
      <el-menu-item
        class="phoneNotShow"
        :style="{float:'right'}"
        v-else
        @click="login"
        index="user-login"
      >登录</el-menu-item>
    </el-menu>
    <transition name="el-fade-in">
      <div class="phoneMenu" v-show="phoneMenuShow">
        <el-menu
          class="menu"
          :default-active="select"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item @click="index" index="index">首页</el-menu-item>
          <el-submenu v-for="(item,index) in tags" :key="index" :index="(index+1)+''">
            <template slot="title">{{item.tagsName}}</template>
            <el-menu-item
              v-for="(item2,index2) in item.typeSends"
              :key="index2"
              @click="type(item2.typeId)"
              :index="'type-'+item2.typeId"
            >{{item2.typeName}}</el-menu-item>
          </el-submenu>
          <el-submenu v-if="user.islogin" index="user">
            <template slot="title">{{user.name}}</template>
            <el-menu-item @click="usercenter" index="user-center">我的主页</el-menu-item>
            <el-menu-item @click="useredit" index="user-edit">修改资料</el-menu-item>
          </el-submenu>
          <el-menu-item v-else @click="login" index="user-login">登录</el-menu-item>
        </el-menu>
        <div @click="phoneshow" class="block"></div>
      </div>
    </transition>
  </div>
</template>

<script>
import typeApi from "@/assets/api/type.js";
import userApi from "@/assets/api/user.js";
export default {
  data() {
    return {
      tags: [],
      select: null,
      user: {
        islogin: false
      },
      phoneMenuShow: false
    };
  },
  mounted() {
    typeApi.getType().then(res => {
      this.tags = res.data.tags;
    });
    userApi.statue().then(res => {
      if (res.data.success == 1) {
        this.user.name = res.data.user.nickname;
        this.user.id = res.data.user.userid;
        this.user.islogin = true;
      }
    });
    if (this.$route.name == "index") this.select = "index";
    else if (this.$route.name == "type") {
      this.select = "type-" + this.$route.params.id;
    }
  },
  methods: {
    index() {
      location.href = "/";
    },
    type(id) {
      this.$router.push({
        path: "/type/" + id
      });
    },
    login() {
      this.$router.push({
        path: "/user/login"
      });
    },
    phoneshow() {
      this.phoneMenuShow = false;
    },
    usercenter() {
      this.$router.push({
        path: "/user/" + this.user.id
      });
    },
    useredit() {
      this.$router.push({
        path: "/user/edit"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/source.scss";
@import "@/assets/screen.scss";

.page-container {
  width: 90%;
  padding: 0 5%;
  @media (min-width: $media-screen-width) {
    width: 60%;
    padding: 0 20%;
  }
}
.user {
  float: right;
}

.phoneMenu {
  z-index: 1024;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;

  .menu {
    float: left;
    width: 60%;
    height: 100%;
  }
  .el-menu {
    border: 0;
  }
  .block {
    width: 40%;
    height: 100%;
    float: left;
    background-color: rgba($color: #000, $alpha: 0.6);
  }
}

.phoneShowOnly {
  @media (min-width: $media-screen-width) {
    display: none;
  }
}
.phoneNotShow {
  @media (max-width: $media-screen-width) {
    display: none;
  }
}
</style>
